<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>桃李科技</title>
	<link rel="stylesheet" href="__BS__/css/bootstrap.min.css">
</head>
<body>
	<div class="container">

      <!-- Static navbar -->
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">桃李科技</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <!-- <li class="active"><a href="#">首页</a></li> -->
              <li><a href="<{:U('index')}>">当日签到情况</a></li>
              <li class="active"><a href="<{:U('weekSign')}>">某日签到情况查看</a></li>
              <li><a href="<{:U('statistic')}>">统计</a></li>
              <!-- <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li> -->
            </ul>
            <!-- <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
              <li><a href="../navbar-static-top/">Static top</a></li>
              <li><a href="../navbar-fixed-top/">Fixed top</a></li>
            </ul> -->
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>

      <!-- Main component for a primary marketing message or call to action -->
      <blockquote>
        <p>当前日期：<{$now|date="Y-m-d",###}></p>
      </blockquote>
      <form class="form-inline" style="margin-bottom: 15px;">
        <div class="form-group">
          <label>班级：</label>
          <select name="class" id="selClass" class="form-control">
            <option value="1704">1704</option>
            <option value="1611">1611</option>
          </select>
        </div>
        <div class="form-group">
          <label>姓名：</label>
          <!-- <input type="text" name="name" id="txtName" class="form-control"> -->
          <select name="name" id="txtName" class="form-control">
            <option value="">--请选择--</option>
            <volist name="stu" id="s">
              <option value="<{$s['stuname']}>"><{$s['stuname']}></option>
            </volist>
          </select>
        </div>
        <div class="form-group">
          <label>日期：</label>
          <input type="date" name="date" id="txtDate" class="form-control" value="<{$now|date="Y-m-d",###}>">
        </div>
        <a href="#" class="btn btn-default" role="button" onclick="weekSign.search(this);">查看</a>
      </form>
     <table class="table table-striped table-bordered">
      <tr>
        <th>姓名</th>
        <th>签到时间</th>
        <th>签退时间</th>
        <th>请假/请假原因</th>
      </tr>
      <tbody id="tbWeekSign">
        
      </tbody>
     
      
    </table>

    </div>
    <script src="__BS__/js/jquery.min.js"></script>
    <script type="text/javascript">
      var $tbWeekSign=$('#tbWeekSign');
      var $selClass=$('#selClass');
      var $selName=$('#txtName');
      $(function(){
        $selClass.change(function(){
          var url='<{:U("getStu")}>';
          var param={gclass:$selClass.val()};
          $.post(url,param,function(data){
            var str='<option value="">--请选择--</option>';
            for(var i=0,len=data.length;i<len;i++){
              str+='<option value="'+data[i].stuname+'">'+data[i].stuname+'</option>'
            }
            $selName.html(str);
          })
        })
      });
      weekSign={
        search:function(obj){
          var gclass=$('#selClass').val();
          var name=$('#txtName').val();
          var date=$('#txtDate').val();

           //加上loading效果,按钮变成禁用状态
          $(obj).text("查询中...").attr("disabled","disabled");
          var url='<{:U("weekSignSearch")}>';
          var param={gclass:gclass,name:name,date:date};
          // console.log(param);
          $.post(url,param,function(data){
            weekSign.generateTable(data);
            $(obj).text("查看").removeAttr("disabled");
          })
        },
        generateTable:function(data){
          var str='';
          for(var i=0,len=data.length;i<len;i++){
            str+=`<tr>
              <td>`+data[i].stuname+`</td>
              <td>`+data[i].signintime+`</td>
              <td>`+data[i].signouttime+`</td>
              <td>`+data[i].absent+`</td>
            </tr>`;
          }      
          if(str==''){
            str='<tr><td colspan=4>暂无相关数据</td></tr>';
          }
          $tbWeekSign.html(str);    
        },
         //格式化unix时间戳
        getTime: function( /** timestamp=0 **/ ) {
            var ts = arguments[0] || 0;
            var t, y, m, d, h, i, s;
            t = ts ? new Date(ts * 1000) : new Date();
            y = t.getFullYear();
            m = t.getMonth() + 1;
            d = t.getDate();
            h = t.getHours();
            i = t.getMinutes();
            s = t.getSeconds();
            // 可根据需要在这里定义时间格式  
            return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s);
        }
      }
    </script>
</body>
</html>